<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>捐款</title>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="moudle/layui/css/layui.css" />
</head>
<body style="background-color: #F2F2F2;">
<div class="layui-header header" style="background-color: #1E9FFF!important;">
    <div style="display: inline-block;position: absolute;top: 5px;left: 40px ">
        <h1 style="color: white; font-size: 35px">懿梦千寻</h1>
    </div>
    <ul class="layui-nav layui-bg-blue" style="right: 0; position: absolute;">
        <li class="layui-nav-item"><a href="index.html">首页</a></li>
        <li class="layui-nav-item layui-this"><a href="donate.html">爱心捐赠</a></li>
        <li class="layui-nav-item"><a href="robot.html">联系客服</a></li>
        <li class="layui-nav-item"><a href="">关于我们</a></li>
    </ul>
</div>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div style="width: 1000px; margin: 0 auto;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card" style="min-height: 400px;">
                    <div class="layui-card-header">爱心捐赠</div>
                    <div class="layui-card-body">
                        <div class="layui-col-md6">
                        <form class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">用户名<font style="color: red">*</font></label>
                                <div class="layui-input-block">
                                    <input type="text" id="name" name="name" lay-verify="required" autocomplete="off"
                                           lay-reqtext="姓名不能为空! 您输入的姓名将进入爱心人士名单留在爱心墙上!"
                                           placeholder="请输入用户名" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">捐献金额<font style="color: red">*</font></label>
                                <div class="layui-input-block">
                                    <input type="number" id="moneyAmount" name="moneyAmount" lay-verify="required"
                                           lay-reqtext="捐献金额不能为空! 您输入的捐献金额将进入爱心人士名单留在爱心墙上!"
                                           placeholder="请输入捐献金额(单位:元)" autocomplete="off" class="layui-input">
                                    <span style="font-size: 10px; color: #444">您的姓名和捐献金额将进入爱心人士名单留在爱心墙上! 感谢您的爱心与支持!</span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <a id="donateBtn" class="layui-btn layui-btn-normal" onclick="generateQRCode()" >确定</a>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                                </div>
                            </div>
                        </form>
                        </div>
                        <div class="layui-col-md6">
                            <img id="donateQRCode" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
<script src="moudle/layui/layui.all.js"></script>
<script>
    var interval = "";
    var count = 0;
    var token = "";
    $(document).ready(function () {
        $("#donateBtn").click(function () {
            $("#donateBtn").addClass("layui-btn-disabled");
        });
    });

    // 生成二维码
    function generateQRCode () {
        $.ajax({
            url: "/donate/QRCode/scan/generateDonate",
            type: "POST",
            data: {
                "name": $("#name").val(),
                "moneyAmount": $("#moneyAmount").val()
            },
            success: function (result) {
                if (result.baseImage) {
                    $("#donateQRCode").attr("src","data:image/png;base64,"+result.baseImage);
                    $("#donateQRCode").show(1000);
                    token = result.token;
                    // 开始轮训查询是否扫描
                    interval = setInterval(loopValidate, 3000);
                } else if (!result.success) {
                    removeQRCode(result.msg);
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    }
    // 验证是否消费成功
    function loopValidate() {
        count++;
        if (count > 5) {
            removeQRCode("由于您长时间未请求! 请重新生成二维码!");
            return;
        }
        $.ajax({
            url: "/donate/QRCode/scan/loop",
            type: "POST",
            data: {
                "token": token
            },
            success: function (result) {
                console.log(result);
                if (result.success) {
                    removeQRCode(result.msg);
                }
            },
            error: function (result) {
                console.log(result);
            }
        });
    }

    // 清空二维码
    function removeQRCode (msg) {
        $("#donateQRCode").hide(1000);
        $("#donateBtn").removeClass("layui-btn-disabled");
        layer.msg(msg);
        clearInterval(interval);
        count = 0;
    }
</script>
</html>